import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg'
import './App.css'


class SampleAppFlag extends React.Component {
    static FLAG_HELLO_WORLD = 0
    static FLAG_SAMPLE_APP = 1
}


/**
 * 简单示例
 *  @returns 返回的是一个jsx的element组件
 */
function sampleHelloworld() {
    // 返回的是jsx element对象，会被自动解析为React.createElement()对象
    // .JSX − JSX 是 JavaScript 语法的扩展
    // 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
    return <h1>Hello,World2!</h1>
}


/**
 * 菜鸟教程官网示例
 *   className不要修改，这里是使用className进行的css样式，修改之后，样式会发生改变
 */
function sampleApp() {
    return (
        <div className="App">
            <div className="App-header">
                <img src={logo} className="App-logo" alt='logo' />
                <h2>欢迎来到菜鸟教程</h2>
            </div>
            <p className="App-intro">
                你可以在<code>src/App.js</code>文件中修改
        </p>
        </div>
    );
}

function choseElement(flag) {
    switch (flag) {
        case SampleAppFlag.FLAG_HELLO_WORLD:
            return sampleHelloworld()
        case SampleAppFlag.FLAG_SAMPLE_APP:
            return sampleApp()
    }
}

function testHelloWorldMain(flag) {
    ReactDOM.render(
        choseElement(flag),
        // 把组件挂载到指定的div节点下
        document.getElementById('container')
    );
}

export { SampleAppFlag, testHelloWorldMain }
